/*
* @Author: majingyu
* @Date:   2017-05-04 17:34:19
* @Last Modified by:   jingyu.ma
* @Last Modified time: 2017-08-06 18:47:57
*/

import React from 'react';
import { connect } from 'react-redux';
import 'css/components/requireList.less';

class RequireList extends React.Component{
    constructor(props){
        super(props); 
        this.state = {
            status:1,
            hasMore:true
        }
    }
    commontList(id){
        this.props.commontList(id);
    }
    //加载更多
    hasMoreList(){
        this.props.getMoreList();
    }
    clickTips(id){
        if(this.state.type == 0){
           this.setState(Object.assign({},this.state,{
               type:'1',
               zanImg: "/image/has-zan.png"
           })) 
       }else{
            this.setState(Object.assign({},this.state,{
                type:'0',
                zanImg: "/image/zan.png"
            })) 
       }
        this.props.clickTips(id)
    }
    
    yue(id){
        this.props.inviteOrder(id);
    }
    render(){
        let self = this;
        let cla = this.props.cla || "require-list";
        return(
            <div className={cla}>
                {
                    this.props.servicesLists.list ? this.props.servicesLists.list.map((services) => {
                        let hostImg = services.type == 1?"/image/has-zan.png":"/image/zan.png";
                        return(
                            <div className="services-list" key={services.id} >
                                <div className="services-mess">
                                    <div className="header-img">
                                        <img src='/image/header.jpg' alt="用户头像" />
                                    </div>
                                    <p className="mess-detail">
                                        <span className="user-cla mess-text">{services.courses[0]}</span>
                                        <span className="user-name mess-text">{services.name}</span>
                                    </p>
                                    <div className="yue" onClick={() => {self.yue(services.id)}}>约Ba</div>
                                    <p className="mess-remark">
                                        {services.content}
                                    </p>
                                    <p className="mess-price-time">
                                        <span className="mess-price">{services.price/100}元/小时</span>
                                        <span className="mess-time">有效期至：{services.dtime}</span>
                                    </p>
                                </div> 
                                <div className="option-info">
                                    <span className="comment options"  onClick={() => {self.commontList(services.id)}}>
                                        <img src="/image/diapance.png" alt="评论" />
                                        {services.commentCount}
                                    </span>
                                    <span className="zan options">
                                        <img src={hostImg} alt="点赞" onClick={() => {self.clickTips(services.id)}}/>
                                        {services.zanCount}
                                    </span>
                                    <span className="zan options">
                                        {
                                            self.props.historyPage == 2 ? 
                                            <i onClick={() => {self.accept(service.id)}}> 接受</i> : <i onClick={() => {self.yue(services.id)}}>约Ba</i>
                                        }
                                    </span>
                                </div>
                            </div>
                        );
                    }): <div className="list-mess">暂时无数据</div>
                }
                {
                    ((this.props.servicesLists.total/10).toFixed(0)>this.props.servicesLists.pageNo && this.props.servicesLists.total!=0)?
                    <div className="hasMore" onClick={()=>this.hasMoreList()}>加载更多</div>:''
                }
                
            </div>
        );
    }
}

export default RequireList;